<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/index.css" />
</head>

<body>
	<div id="housesadd">
		<el-form ref="addform" :model="housesObj" label-width="100px" style="width:500px">
			<el-form-item label="房屋标题" :required="true">
				<el-input v-model="housesObj.title"clearable></el-input>
			</el-form-item>
			<el-form-item label="房屋价格">
				<el-input v-model="housesObj.price"clearable></el-input>
			</el-form-item>
			<el-form-item label="房屋面积">
				<el-input v-model="housesObj.areas"clearable></el-input>
			</el-form-item>
			<el-form-item label="房屋说明"clearable>
				<el-input v-model="housesObj.info"></el-input>
			</el-form-item>

			<el-form-item label="房屋图片":required="true">
				
				<input type="file"@change="setFengmian" id="fname" name="fengmian" clearable/>
			    <!-- <input type="button"onclick="clearFile()" value="清空"> -->
			</el-form-item>

			<el-form-item label="房屋朝向" :required="true">
				<el-select v-model="housesObj.housesOrient.orientId" placeholder="请选择朝向"clearable>
					<el-option :label="orient.orientName" :value="orient.orientId" v-for="orient in orientList">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="房屋类型" :required="true">
				<el-select v-model="housesObj.housesType.typeId" placeholder="请选择类型"clearable>
					<el-option :label="type.typeName" :value="type.typeId" v-for="type in typeList"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="房屋发布者" :required="true">
				<el-select v-model="housesObj.admins.adminsId" placeholder="请选择发布者"clearable>
					<el-option :label="admins.adminsName" :value="admins.adminsId" v-for="admins in adminsList">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="insert">添加</el-button>
			</el-form-item>
		</el-form>

	</div>

	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
	<script type="text/javascript" src="js/axios.min.js"></script>

	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript">
		// function clearFile() {
		// 		let file = document.getElementById('fname');
		// 	file.value = '';
		// 	}

		new Vue({
			el: "#housesadd",
			data: {
				housesObj: {
					title: "",
					price: "",
					areas: "",
					info: "",
					housesOrient: {
						orientId: ""
					},
					housesType: {
						typeId: ""
					},
					admins: { //
						adminsId: ""
					},

				},
				orientList: [],
				typeList: [],
				adminsList: [],
				hpic: "" //图片
			},
			
			clearFile() {
				this.$refs.clearFile.value = ''; // 清空file文件
			},

			created() {
				this.getOrientList();
				this.getTypeList();
				this.getAdminsList();
			},
			methods: {
				getOrientList: function () { //获取朝向列表
					let that = this;
					axios.get("/housesOrient/selectAll").then(function (r) {
						if (r.data.state == "success") {
							that.orientList = r.data.housesorientlist;
						}

					});
				},
				getTypeList: function () { //获取类型列表
					let that = this;
					axios.get("/housesType/selectAll").then(function (r) {
						if (r.data.state == "success") {
							that.typeList = r.data.housestypelist;
						}

					});
				},
				getAdminsList: function () {
					let that = this;
					axios.get("/admins/selectAll").then(function (r) {
						if (r.data.state == "success") {
							that.adminsList = r.data.adminslist;
						}

					});
				},
				insert: function () {//添加房屋
					let fm = new FormData();
					if (this.housesObj.title == "") {
						this.$message.error("请输入标题！")
					}
					else if (this.hpic == "") {
						this.$message.error("请上传图片！")
					}
					else if (this.housesObj.housesOrient.orientId == "") {
						this.$message.error("请选择朝向！")
					}
					else if (this.housesObj.housesType.typeId == "") {
						this.$message.error("请选择类型！")
					}
					else if (this.housesObj.admins.adminsId == "") {
						this.$message.error("请选择发布者！")
					}
					else {
						fm.append("title", this.housesObj.title);
						fm.append("price", this.housesObj.price);
						fm.append("areas", this.housesObj.areas);
						fm.append("info", this.housesObj.info);
						fm.append("housePic", this.hpic);
						fm.append("housesOrient.orientId", this.housesObj.housesOrient.orientId);
						fm.append("housesType.typeId", this.housesObj.housesType.typeId);

						fm.append("admins.adminsId", this.housesObj.admins.adminsId);

						axios.post("/houses/insert", fm, {
							headers: {
								'content-type': 'multipart/form-data'
							}
						}).then(function (r) {
							if (r.data.state == "success") {
								location.href = "housesList.html";
							}
						});
					}

				},
				setFengmian: function (event) { //文件域内容改变时触发--用户一旦上传了图片 将图片赋值给hpic变量
					this.hpic = event.target.files[0];
				}

			}
		});
	</script>
</body>

</html>